<template>
	<div>
		<van-tabbar v-model="tabbarActive">
			<van-tabbar-item name="home" to="/home">
				<div class="car-tabbar">
					<i class="fa fa-home" style="font-size: 25px;" />
					<span>首页</span>
				</div>
			</van-tabbar-item>
			<van-tabbar-item name="car" to="/car">
				<div class="car-tabbar">
					<i class="fa fa-car" style="font-size: 20px;" />
					<span>选车</span>
				</div>
			</van-tabbar-item>
			<van-tabbar-item name="me" to="/me">
				<div class="car-tabbar">
					<i class="fa fa-user-circle-o" style="font-size: 20px;" />
					<span>我的</span>
				</div>
			</van-tabbar-item>
		</van-tabbar>
	</div>
</template>

<script>
	export default {
		name: 'cartabbar',
		data() {
			return {
				tabbarActive: this.active
			};
		},
		props: ["active"]
	}
</script>

<style>
	.car-tabbar {
		display: flex;
		flex-direction: column;
	}

	.van-tabbar {
		height: 60px;
	}
</style>
